<!-- 扇形图页面地图 -->

<template>

    <div>
      <button @click="goBack" class="backButton"></button>
      <transition name="fade">
        <div v-if="loading" class="loading">
          <div class="loading-spinner"></div>
        </div>
      </transition>
      <div ref="pieChart" style="width: 100%;height: 400px;"></div>
    </div>


</template>

<script>
import { getInterestInfo } from '@/server/screen-data'
import * as echarts from 'echarts';
export default {
  data() {
    return {
      loading: true, // 是否显示加载动画
      CityData: [],
      CityInterest: [],
      InterestName:[],
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    getlist() {
      getInterestInfo().then((res) => {
        if (res.status == 200) {
          this.CityData = res.data.data.countryTop
          this.CityInterest = this.CityData.map(item => item.score)
          this.InterestName = this.CityData.map(item => item.name)
          // 请求成功后隐藏加载动画
          this.loading = false;
          this.renderChart(); // 绘制扇形图
        }
      }).catch(() => {

      })
    },
    renderChart() {
      const chartDom = this.$refs.pieChart;
      const myChart = echarts.init(chartDom);
      const option = {
        title: {
          text: '全国城市兴趣值统计表', // 主标题
          subtext: '', // 副标题
          x: 'center', // x轴方向对齐方式
          textStyle: {
            color: '#77C0FF'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 150,
          top:200,
          data:[this.InterestName[0],this.InterestName[1],this.InterestName[2],this.InterestName[3],this.InterestName[4],this.InterestName[5],
            this.InterestName[6],this.InterestName[7],this.InterestName[8],this.InterestName[9],this.InterestName[10],this.InterestName[11],
            this.InterestName[12],this.InterestName[13],this.InterestName[14],this.InterestName[15],this.InterestName[16],this.InterestName[17],
            this.InterestName[18],this.InterestName[19],this.InterestName[20],this.InterestName[21],this.InterestName[22],this.InterestName[23],
            this.InterestName[24],this.InterestName[25],this.InterestName[26],this.InterestName[27],this.InterestName[28],this.InterestName[29],],
          textStyle: {
            color: '#77C0FF'
          }
        },


        series: [
          {
            name: '兴趣值分布',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data:[
              {value:this.CityInterest[0],name:this.InterestName[0]},
              {value:this.CityInterest[1],name:this.InterestName[1],},
              {value:this.CityInterest[2],name:this.InterestName[2],},
              {value:this.CityInterest[3],name:this.InterestName[3],},
              {value:this.CityInterest[4],name:this.InterestName[4],},
              {value:this.CityInterest[5],name:this.InterestName[5],},
              {value:this.CityInterest[6],name:this.InterestName[6],},
              {value:this.CityInterest[7],name:this.InterestName[7],},
              {value:this.CityInterest[8],name:this.InterestName[8],},
              {value:this.CityInterest[9],name:this.InterestName[9],},
              {value:this.CityInterest[10],name:this.InterestName[10],},
              {value:this.CityInterest[11],name:this.InterestName[11],},
              {value:this.CityInterest[12],name:this.InterestName[12],},
              {value:this.CityInterest[13],name:this.InterestName[13],},
              {value:this.CityInterest[14],name:this.InterestName[14],},
              {value:this.CityInterest[15],name:this.InterestName[15],},
              {value:this.CityInterest[16],name:this.InterestName[16],},
              {value:this.CityInterest[17],name:this.InterestName[17],},
              {value:this.CityInterest[18],name:this.InterestName[18],},
              {value:this.CityInterest[19],name:this.InterestName[19],},
              {value:this.CityInterest[20],name:this.InterestName[20],},
              {value:this.CityInterest[21],name:this.InterestName[21],},
              {value:this.CityInterest[22],name:this.InterestName[22],},
              {value:this.CityInterest[23],name:this.InterestName[23],},
              {value:this.CityInterest[24],name:this.InterestName[24],},
              {value:this.CityInterest[25],name:this.InterestName[25],},
              {value:this.CityInterest[26],name:this.InterestName[26],},
              {value:this.CityInterest[27],name:this.InterestName[27],},
              {value:this.CityInterest[28],name:this.InterestName[28],},
              {value:this.CityInterest[29],name:this.InterestName[29],},
            ]
          }
        ]
      };

      myChart.setOption(option);
    }
  },
  created() {
    this.getlist()
  }
}
</script>
<style>
.loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.loading-spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>